<!DOCTYPE html>
<!-- saved from url=(0134)http://localhost:63342/day13/day14/%E9%9A%94%E8%A1%8C%E6%8D%A2%E8%89%B2.html?_ijt=360tod448cmkueiaeof0mtjlcv&_ij_reload=RELOAD_ON_SAVE -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <title>隔行换色</title>
</head>
<body>
<table id="tab1" border="1" width="800" align="center">
    <tbody><tr style="">
        <th width="100px"><input type="checkbox">全/<input type="checkbox">反选</th>
        <th>分类ID</th>
        <th>分类名称</th>
        <th>分类描述</th>
        <th>操作</th>
    </tr>
    <tr style="background-color: pink;">
        <td><input type="checkbox" class="checkbox"></td>
        <td>1</td>
        <td>手机数码</td>
        <td>手机数码类商品</td>
        <td><a href="http://localhost:63342/day13/day14/%E9%9A%94%E8%A1%8C%E6%8D%A2%E8%89%B2.html?_ijt=360tod448cmkueiaeof0mtjlcv&amp;_ij_reload=RELOAD_ON_SAVE">修改</a>|<a href="http://localhost:63342/day13/day14/%E9%9A%94%E8%A1%8C%E6%8D%A2%E8%89%B2.html?_ijt=360tod448cmkueiaeof0mtjlcv&amp;_ij_reload=RELOAD_ON_SAVE">删除</a></td>
    </tr>
    <tr style="">
        <td><input type="checkbox" class="checkbox"></td>
        <td>2</td>
        <td>电脑办公</td>
        <td>电脑办公类商品</td>
        <td><a href="http://localhost:63342/day13/day14/%E9%9A%94%E8%A1%8C%E6%8D%A2%E8%89%B2.html?_ijt=360tod448cmkueiaeof0mtjlcv&amp;_ij_reload=RELOAD_ON_SAVE">修改</a>|<a href="http://localhost:63342/day13/day14/%E9%9A%94%E8%A1%8C%E6%8D%A2%E8%89%B2.html?_ijt=360tod448cmkueiaeof0mtjlcv&amp;_ij_reload=RELOAD_ON_SAVE">删除</a></td>
    </tr>
    <tr style="background-color: pink;">
        <td><input type="checkbox" class="checkbox"></td>
        <td>3</td>
        <td>鞋靴箱包</td>
        <td>鞋靴箱包类商品</td>
        <td><a href="http://localhost:63342/day13/day14/%E9%9A%94%E8%A1%8C%E6%8D%A2%E8%89%B2.html?_ijt=360tod448cmkueiaeof0mtjlcv&amp;_ij_reload=RELOAD_ON_SAVE">修改</a>|<a href="http://localhost:63342/day13/day14/%E9%9A%94%E8%A1%8C%E6%8D%A2%E8%89%B2.html?_ijt=360tod448cmkueiaeof0mtjlcv&amp;_ij_reload=RELOAD_ON_SAVE">删除</a></td>
    </tr>
    <tr style="">
        <td><input type="checkbox" class="checkbox"></td>
        <td>4</td>
        <td>家居饰品</td>
        <td>家居饰品类商品</td>
        <td><a href="http://localhost:63342/day13/day14/%E9%9A%94%E8%A1%8C%E6%8D%A2%E8%89%B2.html?_ijt=360tod448cmkueiaeof0mtjlcv&amp;_ij_reload=RELOAD_ON_SAVE">修改</a>|<a href="http://localhost:63342/day13/day14/%E9%9A%94%E8%A1%8C%E6%8D%A2%E8%89%B2.html?_ijt=360tod448cmkueiaeof0mtjlcv&amp;_ij_reload=RELOAD_ON_SAVE">删除</a></td>
    </tr>
    <tr style="background-color: pink;">
        <td><input type="checkbox" class="checkbox"></td>
        <td>5</td>
        <td>牛奶制品</td>
        <td>牛奶制品类商品</td>
        <td><a href="http://localhost:63342/day13/day14/%E9%9A%94%E8%A1%8C%E6%8D%A2%E8%89%B2.html?_ijt=360tod448cmkueiaeof0mtjlcv&amp;_ij_reload=RELOAD_ON_SAVE">修改</a>|<a href="http://localhost:63342/day13/day14/%E9%9A%94%E8%A1%8C%E6%8D%A2%E8%89%B2.html?_ijt=360tod448cmkueiaeof0mtjlcv&amp;_ij_reload=RELOAD_ON_SAVE">删除</a></td>
    </tr>
    <tr style="background-color: yellow;">
        <td><input type="checkbox" class="checkbox"></td>
        <td>6</td>
        <td>大豆制品</td>
        <td>大豆制品类商品</td>
        <td><a href="http://localhost:63342/day13/day14/%E9%9A%94%E8%A1%8C%E6%8D%A2%E8%89%B2.html?_ijt=360tod448cmkueiaeof0mtjlcv&amp;_ij_reload=RELOAD_ON_SAVE">修改</a>|<a href="http://localhost:63342/day13/day14/%E9%9A%94%E8%A1%8C%E6%8D%A2%E8%89%B2.html?_ijt=360tod448cmkueiaeof0mtjlcv&amp;_ij_reload=RELOAD_ON_SAVE">删除</a></td>
    </tr>
    <tr style="background-color: pink;">
        <td><input type="checkbox" class="checkbox"></td>
        <td>7</td>
        <td>海参制品</td>
        <td>海参制品类商品</td>
        <td><a href="http://localhost:63342/day13/day14/%E9%9A%94%E8%A1%8C%E6%8D%A2%E8%89%B2.html?_ijt=360tod448cmkueiaeof0mtjlcv&amp;_ij_reload=RELOAD_ON_SAVE">修改</a>|<a href="http://localhost:63342/day13/day14/%E9%9A%94%E8%A1%8C%E6%8D%A2%E8%89%B2.html?_ijt=360tod448cmkueiaeof0mtjlcv&amp;_ij_reload=RELOAD_ON_SAVE">删除</a></td>
    </tr>
    <tr style="">
        <td><input type="checkbox" class="checkbox"></td>
        <td>8</td>
        <td>羊绒制品</td>
        <td>羊绒制品类商品</td>
        <td><a href="http://localhost:63342/day13/day14/%E9%9A%94%E8%A1%8C%E6%8D%A2%E8%89%B2.html?_ijt=360tod448cmkueiaeof0mtjlcv&amp;_ij_reload=RELOAD_ON_SAVE">修改</a>|<a href="http://localhost:63342/day13/day14/%E9%9A%94%E8%A1%8C%E6%8D%A2%E8%89%B2.html?_ijt=360tod448cmkueiaeof0mtjlcv&amp;_ij_reload=RELOAD_ON_SAVE">删除</a></td>
    </tr>
    <tr style="background-color: pink;">
        <td><input type="checkbox" class="checkbox"></td>
        <td>9</td>
        <td>海洋产品</td>
        <td>海洋产品类商品</td>
        <td><a href="http://localhost:63342/day13/day14/%E9%9A%94%E8%A1%8C%E6%8D%A2%E8%89%B2.html?_ijt=360tod448cmkueiaeof0mtjlcv&amp;_ij_reload=RELOAD_ON_SAVE">修改</a>|<a href="http://localhost:63342/day13/day14/%E9%9A%94%E8%A1%8C%E6%8D%A2%E8%89%B2.html?_ijt=360tod448cmkueiaeof0mtjlcv&amp;_ij_reload=RELOAD_ON_SAVE">删除</a></td>
    </tr>
    <tr style="">
        <td><input type="checkbox" class="checkbox"></td>
        <td>10</td>
        <td>奢侈用品</td>
        <td>奢侈用品类商品</td>
        <td><a href="http://localhost:63342/day13/day14/%E9%9A%94%E8%A1%8C%E6%8D%A2%E8%89%B2.html?_ijt=360tod448cmkueiaeof0mtjlcv&amp;_ij_reload=RELOAD_ON_SAVE">修改</a>|<a href="http://localhost:63342/day13/day14/%E9%9A%94%E8%A1%8C%E6%8D%A2%E8%89%B2.html?_ijt=360tod448cmkueiaeof0mtjlcv&amp;_ij_reload=RELOAD_ON_SAVE">删除</a></td>
    </tr>
    <tr style="background-color: pink;">
        <td><input type="checkbox" class="checkbox"></td>
        <td>11</td>
        <td>家居饰品</td>
        <td>家居饰品类商品</td>
        <td><a href="http://localhost:63342/day13/day14/%E9%9A%94%E8%A1%8C%E6%8D%A2%E8%89%B2.html?_ijt=360tod448cmkueiaeof0mtjlcv&amp;_ij_reload=RELOAD_ON_SAVE">修改</a>|<a href="http://localhost:63342/day13/day14/%E9%9A%94%E8%A1%8C%E6%8D%A2%E8%89%B2.html?_ijt=360tod448cmkueiaeof0mtjlcv&amp;_ij_reload=RELOAD_ON_SAVE">删除</a></td>
    </tr>
</tbody></table>
<script>
    let array = document.querySelectorAll("tr");
    for (let arrayKey in array) {
        if (arrayKey%2 != 0){
            array[arrayKey].style.backgroundColor = "pink"
        }
        let oldColor;
        array[arrayKey].onmouseover = function (){
            oldColor = this.style.backgroundColor
            this.style.backgroundColor = "yellow"
        }
        array[arrayKey].onmouseout = function (){
           this.style.backgroundColor =oldColor;
        }
    }
</script>













<script>
(function() {
  var ws = new WebSocket('ws://' + window.location.host + '/jb-server-page?reloadServiceClientId=28');
  ws.onmessage = function (msg) {
      if (msg.data === 'reload') {
          window.location.reload();
      }
      if (msg.data.startsWith('update-css ')) {
          var messageId = msg.data.substring(11);
          var links = document.getElementsByTagName('link');
          for (var i = 0; i < links.length; i++) {
              var link = links[i];
              if (link.rel !== 'stylesheet') continue;
              var clonedLink = link.cloneNode(true);
              var newHref = link.href.replace(/(&|\?)jbUpdateLinksId=\d+/, "$1jbUpdateLinksId=" + messageId);
              if (newHref !== link.href) {
                clonedLink.href = newHref;
              }
              else {
                var indexOfQuest = newHref.indexOf('?');
                if (indexOfQuest >= 0) {
                  // to support ?foo#hash 
                  clonedLink.href = newHref.substring(0, indexOfQuest + 1) + 'jbUpdateLinksId=' + messageId + '&' + 
                                    newHref.substring(indexOfQuest + 1);
                }
                else {
                  clonedLink.href += '?' + 'jbUpdateLinksId=' + messageId;
                }
              }
              link.replaceWith(clonedLink);
          }
      }
  };
})();
</script></body></html>